<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./utils/flexible.js">
    <link rel="icon" href="assets/images/facicon.ico" type="image/x-icon" />
</head>
<style>
    #header {
        height: 50px;
        background-color: #1d6dff;
        padding: 5px;
        text-align: center;
        position: relative;
    }

    #header .back {
        font-size: 20px;
        color: #ffffff;
        position: absolute;
        left: .2667rem;
        top: 20%;
    }

    #header .back img {
        width: 2rem;
        background-color: #ffffff;
    }

    #header>h4 {
        display: inline-block;
        text-align: center;
        font-size: 20px;
        color: #ffffff;
        padding-left: 30px;
        margin: .6667rem 0;
    }

    #header .back {
        display: block;
    }

    #header .app {
        position: absolute;
        right: .2667rem;
        top: 20%;
        padding: 7px;
    }

    #header .app img {
        height: 34px;
    }

    #product {
        background-color: #f4f4f4;
    }

    #product .info {
        background-color: #f4f4f4;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    #product .info li {
        list-style: none;
        background-color: #fff;
        width: 44%;
        margin: .2133rem;
        padding-bottom: 4.2667rem;
    }

    #product .info li div {
        margin-top: 3.2rem;
    }

    #product .info li div img {
        width: 100%;
    }

    #product .info li p {
        color: red;
        font-size: 1.3333rem;
    }

    #nav .container {
        display: flex;
        justify-content: space-around;
    }

    #nav .container>li {
        width: 30%;
        text-align: center;
        padding: 1.0667rem 0;
    }

    #nav .container .li3 {
        color: red;
    }

    #nav .content {
        display: none;
        width: 100%;
        /* margin: .5333rem 0; */
    }

    #nav .content li {
        color: #000;
        font: 1.0667rem/1.6rem "";
        padding: .5333rem;
        font-weight: bold;
        border: solid 1px #ccc;
        background-color: #fff;
    }
</style>

<body>
    <header id="header">
        <a href="./index.html" class="back fl"><img src="./assets/images/back.png" alt=""></a>
        <h4>凑单品</h4>
        <div class="app fr">
            <a href="">
                <img src="./assets/images/app.png" alt="">
            </a>
        </div>
    </header>
    <nav id="nav">
        <ul class="container">
            <li class="li1">京东</li>
            <li class="li2">华南</li>
            <li class="li3">免费区</li>
        </ul>
        <ol class="content">

        </ol>
    </nav>
    <product id="product">
        <ul class="info">

        </ul>
    </product>

    <section id="footer">
        <div class="more">
            <a href="">
                更多优惠信息&gt;&gt;
            </a>
        </div>
        <div class="chart clearfix">
            <span class="chart_in fl">品牌排行</span>
            <span class="more fr">
                <img src="./assets/images/youjian.png" alt="">
            </span>
        </div>
        <div class="login">
            <div class="container">
                <div class="row">
                    <a href="">
                        <div class="col-xs-3">登入</div>
                    </a>
                    <a href="">
                        <div class="col-xs-4">注册</div>
                    </a>
                    <a href="">
                        <div class="col-xs-5">返回顶部</div>
                    </a>
                    <span></span>
                </div>
            </div>
            <div class="content_b">
                <p>
                    <a href="#">
                        手机APP下载
                    </a>
                    <a href="#">
                        万锋智慧商城手机版
                    </a>
                    -- 掌上比价平台
                </p>
                <p>
                    chst.vip:8081/crm </p>
            </div>
        </div>
    </section>
</body>

</html>
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function fn1() {
        let info = document.querySelector('#product>.info')
        let el2 = ""
        let l = 0

        fetch('http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=0')
            .then(body => body.json())
            .then(res => {
                //console.log(res)
                res.result.forEach(item => {

                    el2 += `<li class='${l++}'>
                
                <div>
                <img src="${item.productImg}" width="1000" alt="">
                </div>
                <h6>${item.productName}</h6>
                <p>${item.productPrice}</p>

                </li>     `
                })
                info.innerHTML = el2;
                fn2()
            })
    }

    function fn2() {
        $('#nav .container').on('click', 'li', function () {
            //console.log(123456)
            //console.log($('#nav .content').prop('flag'))
            if ($('#nav .content').prop('flag')) {
                $('#nav .content').hide().prop('flag', false)
                // console.log(this)
            } else (
                $('#nav .content').show().prop('flag', true)
            )
        })

        $('#nav .container').on('click', '.li1', function () {
            //console.log(777)

            let content = document.querySelector('.content')
            let el = ''
            let i = 0
            fetch('http://chst.vip:1234/api/getgsshop')
                .then(body => body.json())
                .then(res => {
                    //console.log(res)
                    res.result.forEach(item => {
                        el += `<li id='${i++}'>
                            ${item.shopName}
                </li>`
                    })
                    content.innerHTML = el;

                })

        })

        $('#nav .container').on('click', '.li2', function () {
            //console.log(777)
            let content = document.querySelector('.content')
            let el = ''
            let i = 0
            fetch('http://chst.vip:1234/api/getgsshoparea')
                .then(body => body.json())
                .then(res => {
                    //console.log(res)
                    res.result.forEach(item => {
                        el += `<li id='${i++}'>
                            ${item.areaName}
                </li>`
                    })
                    content.innerHTML = el;

                })
        })

        $('#nav .container').on('click', '.li3', function () {
            $('#nav .content').hide().prop('flag', false)
        })

        $('#nav .content').on('click', 'li', function () {
            //console.log(778)
            let info = document.querySelector('#product>.info')
            let el2 = ""
            let l = 0
            //console.log(this)
            fetch(`http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=${$(this).attr('id')}`)
                .then(body => body.json())
                .then(res => {
                    //console.log(res)
                    $('#nav .content').hide().prop('flag', false)
                    res.result.forEach(item => {

                        el2 += `<li class='${l++}'>
                
                <div>
                <img src="${item.productImg}" width="1000" alt="">
                </div>
                <h6>${item.productName}</h6>
                <p>${item.productPrice}</p>

                </li> `
                    })
                    info.innerHTML = el2;
                })
        })
    }

    fn1()
</script>